<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-07-09 10:58:55
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-10-30 17:52:47
-->
<template>
  <div class="transferTree">
    <div>
      <el-input @input='handleInput' v-model='inputValue'></el-input>
    </div>
    <!-- 左侧 -->
    <div class=" transfer-left">
      <div class="transfer-title">
        <el-checkbox :indeterminate="form_is_indeterminate" v-model="from_check_all" @change="fromAllBoxChange">
        </el-checkbox><span style="margin-left: 5px;">全部</span>
      </div>
      <div class="left-tree">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <el-tree :data="allData" class="filter-tree" :show-checkbox='true' default-expand-all node-key="id"
          ref="leftTree" highlight-current :props="defaultProps" @check='getCheckNode' :filter-node-method="filterNode"
          :default-checked-keys="defaultCheckedKeys">
        </el-tree>
      </div>
    </div>
    <!-- 穿梭按钮 -->
    <div class="transfer-btn">
      <el-button type='primary' icon="el-icon-arrow-left" @click='handleRemoveChecked'></el-button>
      <el-button type='primary' icon="el-icon-arrow-right" @click='handleSureChecked'></el-button>
    </div>
    <!-- 右侧 -->
    <div class="transfer-right">
      <div class="transfer-title">
        <el-checkbox :indeterminate="to_is_indeterminate" v-model="to_check_all" @change="toAllBoxChange">
        </el-checkbox><span style="margin-left: 5px;">已选</span>
      </div>
      <div class="right-checked">
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label="item" v-for='(item,index) in checkedNodes' @change='handleCheckedChange' :key='index'>
            {{item.label}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'transferTree',
    watch: {
      filterText(val) {
        this.$refs.leftTree.filter(val);
      },
      defaultCheckedKeys(val) {
        this.defaultCheckedKeys = val
      }
    },
    data() {
      return {
        filterText: '',
        from_check_all: false,
        to_check_all: false,
        checkList: [],
        inputValue: '',
        allData: [{
          id: 1,
          label: '一级 1',
          isParent: true,
          children: [{
            id: 4,
            label: '二级 1-1',
            isParent: false,
          }, {
            id: 10,
            label: '三级 1-3',
            isParent: false,
          }, {
            id: 11,
            label: '三级 1-3',
            isParent: false,
          }]
        }, {
          id: 2,
          label: '一级 2',
          isParent: true,
          children: [{
            id: 5,
            label: '二级 2-1',
            isParent: false,
          }, {
            id: 6,
            label: '二级 2-2',
            isParent: false,
          }]
        }, {
          id: 3,
          label: '一级 3',
          isParent: true,
          children: [{
            id: 7,
            label: '二级 3-1',
            isParent: false,
          }, {
            id: 8,
            label: '二级 3-2',
            isParent: false,
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        checkedNodes: [],
        defaultCheckedKeys: [], // 所有被选中的叶子节点
        allCheckedNodes: [], // 所有被选中的节点
        to_is_indeterminate: false,
        form_is_indeterminate: false,
        currentNodes: null,
        showNodes: []
      }
    },
    /*
      在筛选之前，将已经选中的数据进行保存，
      在筛选的时候，保存显示出来的数据
      判断筛选的时候，选中的是否是否是父类节点，如果不是父类节点就不做处理
      如果是父类节点，取消父类中被隐藏的节点，然后将筛选前选中的数据，重新进行回显
    **/
    methods: {
      filterNode(value, data) {
        if (!value) return true;
        data.isShow = data.label.indexOf(value) !== -1
        if (data.isShow) {
          this.showNodes.push(data)
        }
        return data.label.indexOf(value) !== -1;
      },
      // 防抖
      debouce(fun, delay) {
        let timer = null
        return () => {
          clearTimeout(timer)
          timer = setTimeout(() => {
            fun()
          }, delay)
        }
      },
      // 输出
      handleInput() {
        let test = this.debouce(() => {
          console.log(this.inputValue)
        }, 1000)
        console.log(test())
      },
      // 获取选中的节点
      getCheckNode(value, data) {
        console.log(this.showNodes, '显示的数组')
        this.currentNodes = value
      },
      // 取消选中
      handleRemoveChecked() {
        let data = JSON.parse(JSON.stringify(this.checkedNodes))
        if (this.checkList.length == this.checkedNodes.length) {
          this.to_check_all = false
        }
        this.checkList.map(item => {
          item.disabled = false
          this.$refs.leftTree.setChecked(item, false)
          data.map((subitem, index) => {
            if (item.id == subitem.id) {
              data.splice(index, 1)
            }
          })
        })
        this.checkList = []
        this.checkedNodes = data
        this.to_is_indeterminate = false
        this.clearTreeDisabled(this.allData)
        let arr = this.$refs.leftTree.getCheckedNodes(true)
        if (!arr.length) {
          this.from_check_all = false
        }
      },

      // 清空所有没有被选中的disabled
      clearTreeDisabled(data) {
        data.map(item => {
          item.disabled = false
          if (item.children && item.children.length > 0) {
            return this.clearTreeDisabled(item.children)
          } else {
            return false
          }
        })
      },
      // 左侧单选框设置
      handleCheckedChange() {
        console.log(this.checkList, this.checkedNodes)
        if (this.checkList.length == this.checkedNodes.length && this.checkList.length) {
          this.to_check_all = true
          this.to_is_indeterminate = false
        } else if (!this.checkList.length) {
          this.to_is_indeterminate = false
          this.to_check_all = false
        } else {
          this.to_check_all = false
          this.to_is_indeterminate = true
        }
      },

      toAllBoxChange(val) {
        this.checkList = val ? this.checkedNodes : []
        this.to_is_indeterminate = false // 关闭半选状态
      },
      // 树全选
      fromAllBoxChange(val) {
        if (!this.allData.length) return
        if (val) {
          this.$refs["leftTree"].setCheckedNodes(this.allData);
        } else {
          this.$refs["leftTree"].setCheckedNodes([]);
        }
      },
      // 确定选中内容
      handleSureChecked() {
        this.checkedNodes = this.$refs.leftTree.getCheckedNodes(true)
        this.allCheckedNodes = this.$refs.leftTree.getCheckedNodes(false, false)
        console.log(this.checkedNodes, this.allCheckedNodes, '所有选中节点的数据')
        let keys = this.$refs.leftTree.getCheckedKeys()
        this.$refs.leftTree.setCheckedKeys([])
        this.allCheckedNodes.map(item => {
          item.disabled = true
        })
        this.defaultCheckedKeys = keys
        this.checkList = []
      }
    },
  }
</script>
<style scoped lang='scss'>
  .transferTree {
    width: 900px;
    /* height: 800px; */
    margin: auto;
    margin-top: 20px;
    box-sizing: border-box;
    display: flex;
    color: #606266;

    .transfer-left {
      flex: 1;
      height: 500px;
      border: 1px solid #d9d9d9;
    }

    .transfer-btn {
      display: flex;
      align-items: center;
      margin: 0 20px;
    }

    .transfer-right {
      flex: 1;
      height: 500px;
      border: 1px solid #d9d9d9;
    }

    .transfer-title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #d9d9d9;
      padding-left: 20px;
      display: flex;
      align-items: center;
    }

    .left-tree {
      width: 100%;
      height: calc(100% - 50px);
      padding: 20px;
    }

    .right-checked {
      width: 100%;
      height: calc(100% - 50px);
      padding: 20px;
    }
  }

  .el-button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0 !important;
  }

  .el-checkbox {
    display: block;
    line-height: 25px;
    margin-top: 3px;
  }
</style>